<div class="content">
    <div id="example_title">
        <h1>ES6 Modules</h1>
        Staring with w2ui 2.0, you can use ES6 modules import syntax. All of the demos now use ES6 module syntax,
        and the demo below is similar to the first demo, but loads config from a file.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="main" style="width: 100%; height: 400px;"></div>

<!--CODE-->
<script type="module">
import { w2layout, w2sidebar, w2grid, w2ui, query  } from '__W2UI_PATH__'
import conf from './data/conf-es6.js'

// register app globally
window.app = { w2ui }
window.query = query

let layout = new w2layout(conf.layout)
let sidebar = new w2sidebar(conf.sidebar)
let grid1 = new w2grid(conf.grid1)
let grid2 = new w2grid(conf.grid2)

layout.render(query('#main')[0])
layout.html('left', sidebar)
layout.html('main', grid1)
</script>